<template>
    <div class="real-time-monitoring">
      <h1>实时监控</h1>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>服务器状态</span>
          </div>
        </template>
        <div class="server-status">
          <p>版本号: {{ serverInfo.version }}</p>
          <p>运行模式: {{ serverInfo.mode }}</p>
          <p>启动时间: {{ serverInfo.startTime }}</p>
          <p>运行时长: {{ serverInfo.uptime }}</p>
        </div>
      </el-card>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>内存使用</span>
          </div>
        </template>
        <div class="memory-usage">
          <p>总内存: {{ memory.total }} MB</p>
          <p>已使用内存: {{ memory.used }} MB</p>
          <p>内存碎片率: {{ memory.fragmentation }}%</p>
          <p>内存使用率: {{ memory.usagePercent }}%</p>
          <div id="memoryChart" class="chart"></div>
        </div>
      </el-card>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>连接统计</span>
          </div>
        </template>
        <div class="connection-stats">
          <p>当前连接数: {{ connections.current }}</p>
          <p>最大连接数: {{ connections.max }}</p>
          <p>阻塞连接数: {{ connections.blocked }}</p>
        </div>
      </el-card>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>性能指标</span>
          </div>
        </template>
        <div class="performance-metrics">
          <p>每秒操作数 (QPS): {{ performance.qps }}</p>
          <p>平均响应时间: {{ performance.avgResponseTime }} ms</p>
          <p>最大响应时间: {{ performance.maxResponseTime }} ms</p>
          <div id="performanceChart" class="chart"></div>
        </div>
      </el-card>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>键空间统计</span>
          </div>
        </template>
        <div class="key-space-stats">
          <p>键总数: {{ keys.total }}</p>
          <p>过期键数: {{ keys.expired }}</p>
        </div>
      </el-card>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>实时命令统计</span>
          </div>
        </template>
        <div class="command-stats">
          <div id="commandChart" class="chart"></div>
        </div>
      </el-card>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>实时流量监控</span>
          </div>
        </template>
        <div class="traffic-stats">
          <p>输入流量: {{ traffic.in }} KB/s</p>
          <p>输出流量: {{ traffic.out }} KB/s</p>
          <div id="trafficChart" class="chart"></div>
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import * as echarts from 'echarts/core';
  import { LineChart, PieChart, BarChart } from 'echarts/charts';
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent
  } from 'echarts/components';
  import { CanvasRenderer } from 'echarts/renderers';
  
  echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    CanvasRenderer,
    LineChart,
    PieChart,
    BarChart,
  ]);
  
  const serverInfo = ref({
    version: 'Redis 6.2.5',
    mode: 'standalone',
    startTime: '2024-08-26 09:00:00',
    uptime: '2 hours and 28 minutes',
  });
  
  const memory = ref({
    total: 1024,
    used: 800,
    fragmentation: 1.2,
    usagePercent: 78.12,
  });
  
  const connections = ref({
    current: 50,
    max: 10000,
    blocked: 0,
  });
  
  const performance = ref({
    qps: 1200,
    avgResponseTime: 2.5,
    maxResponseTime: 5.0,
  });
  
  const keys = ref({
    total: 50000,
    expired: 500,
  });
  
  const commandStats = ref<Array<{ name: string; count: number }>>([
    { name: 'GET', count: 500 },
    { name: 'SET', count: 300 },
    { name: 'INCR', count: 200 },
    { name: 'LPUSH', count: 100 },
    { name: 'DEL', count: 50 },
  ]);
  
  const traffic = ref({
    in: 1024,
    out: 512,
  });
  
  const initMemoryChart = () => {
    const chartDom = document.getElementById('memoryChart');
    const myChart = echarts.init(chartDom);
    const option = {
      tooltip: {
        trigger: 'item',
      },
      series: [
        {
          name: '内存使用率',
          type: 'pie',
          radius: '50%',
          data: [
            { value: memory.value.used, name: '已使用' },
            { value: memory.value.total - memory.value.used, name: '未使用' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
  
    myChart.setOption(option);
  };
  
  const initPerformanceChart = () => {
    const chartDom = document.getElementById('performanceChart');
    const myChart = echarts.init(chartDom);
    const option = {
      tooltip: {
        trigger: 'axis',
      },
      xAxis: { // 确保这里定义了 xAxis
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '每秒操作数 (QPS)',
          type: 'line',
          smooth: true,
          areaStyle: {},
          data: [820, 932, 901, 934, 1290, 1330, 1320], // 示例数据
        },
      ],
    };
  
    myChart.setOption(option);
  };
  
  const initCommandChart = () => {
    const chartDom = document.getElementById('commandChart');
    const myChart = echarts.init(chartDom);
    const option = {
      tooltip: {
        trigger: 'item',
      },
      series: [
        {
          name: '命令统计',
          type: 'bar',
          data: commandStats.value.map(cmd => cmd.count),
          x: commandStats.value.map(cmd => cmd.name), // 确保这里定义了 xAxis 的 data
        },
      ],
    };
  
    myChart.setOption(option);
  };
  
  const initTrafficChart = () => {
    const chartDom = document.getElementById('trafficChart');
    const myChart = echarts.init(chartDom);
    const option = {
      tooltip: {
        trigger: 'axis',
      },
      xAxis: { // 确保这里定义了 xAxis
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '输入流量',
          type: 'line',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: '输出流量',
          type: 'line',
          data: [220, 182, 191, 234, 290, 330, 310],
        },
      ],
    };
  
    myChart.setOption(option);
  };
  
  onMounted(() => {
    initMemoryChart();
    initPerformanceChart();
    initCommandChart();
    initTrafficChart();
  });
  </script>
  
  <style scoped>
  .real-time-monitoring {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .chart {
    height: 300px;
  }
  </style>